<template>
  <!-- 技术规则 详情 -->
  <div :class="['Detail', { mobile: $isMobile }]">
    <div class="g-con">
      <div
        class="top"
        v-if="$isMobile"
      >
        {{ t('header.menu5') }}
      </div>

      <div class="breadcrumb flexsb">
        <div class="flexsc">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/tech' }">{{ t('header.menu5') }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ t('tech.b1') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <div
      class="main"
      v-if="info"
    >
      <div class="g-con grid">
        <div class="container">
          <div class="title flexcc">{{ info.ruleTitle }}</div>
          <div class="flexsb mt-6">
            <div class="author flexsc">
              <img
                class="avatar mr-1"
                :src="info.pubUserAvatar || defaultAvatar"
              />
              {{ info.pubUserName }} · {{ dateFormat(info.pubTime, 3) }}
            </div>
            <div
              class="share flexec"
              v-if="!$isMobile"
            >
              <img
                src="@/assets/img/icon_link.png"
                @click="shareFn('link')"
              />
              <img
                src="@/assets/img/icon_facebook.png"
                @click="shareFn('QRCode')"
              />
              <img
                src="@/assets/img/icon_tite.png"
                @click="shareFn('QRCode')"
              />
              <img
                src="@/assets/img/icon_xinlang.png"
                @click="shareFn('QRCode')"
              />
              <img
                src="@/assets/img/icon_weixin.png"
                @click="shareFn('QRCode')"
              />
            </div>
          </div>

          <div
            class="info mt-3"
            v-html="info.ruleContent"
          ></div>

          <div class="bottom mt-6">
            <div
              class="tit mb-3"
              style="font-size: 16px"
            >
              {{ t('tech.t4') }}：
            </div>
            <div
              v-if="info.explainTitle1"
              class="item"
              @click="openExplainContent(info.explainTitle1, info.explainContent1)"
            >
              <img :src="info.explainImage1" />
              <div>
                <div class="title line-2 mt-2">{{ info.explainTitle1 }}</div>
                <div class="time mt-1">{{ dateFormat(info.explainTime1, 3) }}</div>
                <div class="text noscrollbar line-2 mt-1">{{ toText(info.explainContent1, 200) }}</div>
              </div>
            </div>
            <div
              v-if="info.explainTitle2"
              class="item"
              @click="openExplainContent(info.explainTitle2, info.explainContent2)"
            >
              <img :src="info.explainImage2" />
              <div>
                <div class="title line-2 mt-2">{{ info.explainTitle2 }}</div>
                <div class="time mt-1">{{ dateFormat(info.explainTime2, 3) }}</div>
                <div class="text noscrollbar line-2 mt-1">{{ toText(info.explainContent2, 200) }}</div>
              </div>
            </div>
            <div
              v-if="info.explainTitle3"
              class="item"
              @click="openExplainContent(info.explainTitle3, info.explainContent3)"
            >
              <img :src="info.explainImage3" />
              <div>
                <div class="title line-2 mt-2">{{ info.explainTitle3 }}</div>
                <div class="time mt-1">{{ dateFormat(info.explainTime3, 3) }}</div>
                <div class="text noscrollbar line-2 mt-1">{{ toText(info.explainContent3, 200) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="QrCodeVis"
      :title="t('blog.dlt2')"
      width="400px"
      destroy-on-close
      center
    >
      <div class="flexcc">
        <img
          :src="currentLinkImg"
          class="qrcode"
          height="200"
        />
      </div>
    </el-dialog>

    <el-dialog
      v-model="explainContentVis"
      width="1000px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4
            :id="titleId"
            :class="[titleClass, 'flexsc']"
          >
            {{ explainTitle }}
          </h4>
          <img
            src="@/assets/img/icon_guanbi.png"
            @click="close"
            class="close"
          />
        </div>
      </template>
      <div
        style="height: 60vh; overflow: auto"
        v-html="explainContent"
      ></div>
    </el-dialog>

    <van-dialog
      v-model:show="explainContentVis_m"
      :title="explainTitle"
      show-cancel-button
    >
      <div
        style="padding: 20px; height: 60vh; overflow: auto"
        v-html="explainContent"
      ></div>
    </van-dialog>
  </div>
</template>

<script setup>
import { onBeforeMount, ref, watch, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { dateFormat, toText } from '@/utils'
import { getDetailApi } from '@/service/tech'
import { qrCode } from '@/service/common'
import useLogin from '@/stores/login'
import useAd from '@/stores/ad'
import useClipboard from 'vue-clipboard3'

const { toClipboard } = useClipboard()
const copy = async (text) => {
  try {
    await toClipboard(text)
    ElMessage.success(t('news.copy'))
  } catch (e) {}
}

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

onBeforeMount(() => {
  init()
})

const router = useRouter()
const route = useRoute()
watch(
  () => route.query,
  (n) => {
    getDetail()
  }
)

const storeLogin = useLogin()
const storeAd = useAd()
const { getAd } = storeAd

const { t, locale } = useI18n()
watch(locale, (n) => {
  init()
})

// 详情
const info = ref(null)
const getDetail = () => {
  const id = route.query.id
  if (!id) return
  getDetailApi(id).then(({ data }) => {
    info.value = data
  })
}

// 默认头像
const defaultAvatar = new URL('@/assets/img/icon_touxiang_01.png', import.meta.url)

//分享
const currentLinkImg = ref('')
const QrCodeVis = ref(false)
const shareFn = (type) => {
  if (type == 'link') {
    copy(window.location.href)
  }

  if (type == 'QRCode') {
    qrCode({ link: window.location.href }).then((res) => {
      currentLinkImg.value = window.URL.createObjectURL(res)
      QrCodeVis.value = true
    })
  }
}

const explainContentVis = ref(false)
const explainContentVis_m = ref(false)
const explainTitle = ref('')
const explainContent = ref('')
const openExplainContent = (tit, con) => {
  if (!$isMobile) {
    explainContentVis.value = true
  } else {
    explainContentVis_m.value = true
  }
  explainTitle.value = tit
  explainContent.value = con
}

//
const init = () => {
  getDetail()
}
</script>

<style scoped lang="scss">
.Detail {
  .breadcrumb {
    padding: 30px 0;
    // border-bottom: 2px solid #eaebec;
  }
  .share {
    img {
      height: 30px;
      margin-left: 28px;
      cursor: pointer;
    }
  }

  .main {
    background: #f5f5f5;
    padding: 30px 0 100px;
    margin-bottom: -76px;

    .container {
      background: #fff;
      padding: 60px 40px;
      border-radius: 4px;
      > .title {
        font-size: 28px;
        font-weight: bold;
      }
      .author {
        color: #9d9fa5;
        .avatar {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
      }
      > .info {
        color: #6a6973;
        line-height: 1.6;
        word-break: break-all;
        :deep(img) {
          max-width: 100%;
        }
        :deep(u){
              font-size: inherit !important;
              font-family:inherit !important;
            }
            :deep(em){
              font-size: inherit !important;
              font-family:inherit !important;
            }
           :deep(strong){
              font-size: inherit !important;
              font-family:inherit !important;
            }
            :deep(s){
              font-size: inherit !important;
              font-family:inherit !important;
            }
      }
      > .bottom {
        .item {
          display: grid;
          grid-template-columns: 140px calc(100% - 160px);
          gap: 20px;
          cursor: pointer;
          margin-bottom: 30px;

          img {
            background: #f2f2f2;
            height: 140px;
            width: 100%;
          }

          .title {
            font-weight: bold;
          }

          .time {
            font-size: 12px;
            color: #9d9fa5;
          }

          .text {
            font-size: 12px;
            color: #9d9fa5;
          }
        }
      }
    }
  }

  &.mobile {
    .top {
      background: #252628;
      color: #fff;
      padding: 12px 20px;
      font-weight: bold;
    }
    .g-con {
      width: 100%;
      padding: 0;
    }
    .author {
      justify-content: flex-start;
    }
    .breadcrumb {
      display: none;
    }

    .main {
      padding: 0;
      margin: 0;
      .grid {
        display: block;
      }
      .container {
        padding: 40px 10px;
        min-height: none;
        > .title {
          font-size: 20px;
        }
        .info {
          :deep(video) {
            max-width: 100%;
          }
        }

        .item {
        }
      }
      .right {
        display: none;
      }
    }
  }
}
</style>
